<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="font">用户注册</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li class="username">
        <div class="content">
          <input type="text" v-model="user.userName" placeholder="请输入用户名">
        </div>
      </li>
      <li class="phone">
        <div class="content">
          <input type="text" @blur="checkUserId" v-model="user.userId" placeholder="请输入11位手机号码">
        </div>
      </li>
      <li class="password">
        <div class="content">
          <input type="password" v-model="user.password" placeholder="请输入密码">
        </div>
      </li>
      <li class="password">
        <div class="content">
          <input type="password" v-model="confirmPassword" placeholder="确认密码">
        </div>
      </li>
      <li class="gender">
        <input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;">男
        <input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女
      </li>
    </ul>
    <div class="button-regist">
      <button @click="register">点击注册</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Register',
  data() {
    return {
      user: {
        userId: '',
        password: '',
        userName: '',
        userSex: 1
      },
      confirmPassword: ''
    }
  },
  methods: {
    checkUserId() {
      let reg = /^\d{11}$/;
      if (!reg.test(this.user.userId)) {
        alert('请输入11位手机号码！')
      }
    },
    register() {
      const reg = /^[a-zA-Z0-9_]{6,16}$/;
      if (this.user.userId == '') {
        alert('手机号码不能为空！');
        return;
      }
      if (this.user.password == '') {
        alert('密码不能为空！');
        return;
      }
      if (this.user.password != this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }
      if (this.user.userName == '') {
        alert('用户名不能为空！');
        return;
      }
      //注册请求
      this.$axios.post('users/registration', this.user
      ).then(response => {
        console.log(response);
        if (response.status == 200) {
          alert('注册成功！');
          this.$router.go(-1);
        } else {
          alert('注册失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    }
  },
  components: {
    Footer
  }
}
</script>
<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*********** 表单部分 ***********/
.wrapper .form-box {
  width: 100%;
  margin-top: 15vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  /* margin-top: 2vw; */

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .form-box li .content input {
  font-size: 3.5vw;
  padding: 4.5vw 15vw;
  border-radius: 20px;
  border: 0.5px solid #999;
}

.wrapper .form-box li .gender {
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin-top: 5px;
  color: #444;
}

.gender span {
  margin: 0 10px;
}

.wrapper .button-regist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-regist button {
  margin-top: 5vw;
  font-size: 16px;
  padding: 3.5vw 28.3vw;
  background-color: #0097ff;
  border-radius: 25px;
  border: none;
  color: #fff;
}
</style>